
/**
 * 
 * @param {*} element 元素
 * @param {*} attr 属性名
 */
// 兼容问题  用来获取当前属性
function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}

/**
 * 
 * @param {*} element 元素
 * @param {*} json 对象
 * @param {*} fn 回调函数
 */
// 调用变速动画函数 第一个是 元素 第二个是 对象 第三个是 回调函数
function animate1(element, json, fn) {
    // 在声明定时器之前 先清理定时器
    clearInterval(element.timeId);
    // 声明定时器
    element.timeId = setInterval(function () {
        //默认,假设,全部到达目标
        var flag = true;

        //遍历json对象中的每个属性还有属性对应的目标值
        for (var attr in json) {
            // 判断是不是 opacity 透明度
            if (attr == "opacity") {
                // 获取当前属性的位置 放大100
                var current = getStyle(element, attr) * 100;
                // 获取目标位置 也就是当前属性的键值  放大100
                var target = json[attr] * 100;
                // 进步值 因为是 变速 先快后慢 而下面的 公式 就是让 进步值 越来越小 
                var step = (target - current) / 10;
                // 判断 进步值 是否大于0  如果大于0 向上取整 如果小于0 那就向下取整 目的 就是 目标值 比 现在获取的小 那就需要 减 
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                // 让 当前值 自增
                current += step;
                // 让该 属性 进行操作 比如 宽度  让宽度 的 宽度 变大 一次比一次小  但是 透明度没有 px 原本放大100 现在 缩小100
                element.style[attr] = current / 100;

            } else if (attr == "zIndex") {
                // 判断是不是 zIndex 层级关系
                // 如果是 让该元素的属性值 赋给 该元素的属性
                element.style[attr] = json[attr];

            } else {
                // 如果都不是 那就是 普通的属性

                //获取元素这个属性的当前的值
                var current = parseInt(getStyle(element, attr));
                // 获取目标位置 也就是当前属性的键值
                var target = json[attr];
                // 进步值 因为是 变速 先快后慢 而下面的 公式 就是让 进步值 越来越小 
                var step = (target - current) / 10;
                // 判断 进步值 是否大于0  如果大于0 向上取整 如果小于0 那就向下取整 目的 就是 目标值 比 现在获取的小 那就需要 减 
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                // 让 当前值 自增
                current += step;
                // 让该 属性 进行操作 比如 宽度  让宽度 的 宽度 变大 一次比一次小
                element.style[attr] = current + 'px';
            }
            //是否到达目标 没有到达的话  就让它 默认到达目标的 让它 为false
            if (target != current) {
                flag = false;
            }

        }

        // 在for in 循环完毕后 判断所有的目标 都已经完成 如果到达 就 清理定时器 然后 判断 fn是不是 有 如果存在 就调用 ()
        if (flag) {
            clearInterval(element.timeId);
            if (fn) {
                fn();
            }
        }

    }, 10)
}

// 轮播图

function animate(element, target) {
    // 获取div的当前的 离左边距 的距离多远------数字类型,没有px
    var current = element.offsetLeft;
    //一会要清理定时器(只产生一个定时器)
    clearInterval(element.timer);

    element.timer = setInterval(function () {
        //div每次移动多少像素---步数
        var step = 10;
        //  判断 div当前的左边距 是否小于  所点击的那个距离
        // 也就是说 如果 current < target 就说明还没有到达目标
        // 如果 current > target 就说明到达目标 或者超过的目标 那么就减去当前的step  也就是 -step


        // 用起始值 和 目标值进行比较 
        // 如果起始值 比 目标值 小，那么就每次都加 正数 才能达到目标值 
        // 如果起始值 比 目标值 大，那么就每次都加 负数 才能达到目标值 
        step = current < target ? step : -step;
        //每次移动后的距离
        current += step;
        //判断当前移动后的位置是否到达目标位置
        // 目标值 减去 起始值
        // 如果目标值 减去 起始值 大于 每次走的步数 那么就 true
        // 如果目标值 减去 起始值 小于 每次走的步数 那么就flase
        if (Math.abs(target - current) > Math.abs(step)) {
            element.style.left = current + 'px';
        }
        else {
            //清理定时器
            clearInterval(element.timer);
            element.style.left = target + 'px';
        }
    }, 10)

}